<template>
    <div class="topnav">
        <div class="backtop" @click="backtop">
            <span class="iconfont">&#xe600;</span>
        </div>
        <div class="navtitle">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  name: 'Topnav',
  setup() {
    const router = useRouter();
    function backtop() {
      router.back();
    }
    return {
      backtop,
    };
  },
};
</script>

<style scoped>
    .topnav {
        display: flex;
        position: fixed;
        top: 0;
        width: 100%;
        height: 50px;
        line-height: 50px;
        color: #000000;
        font-weight: 700;
        background-color: #ffffff;
    }
    .backtop{
        flex: 2;
    }
    .backtop span{
        font-size: 30px;
    }

    .navtitle {
        flex: 8;
        text-align: left;
        font-size: 20px;
    }
</style>
